<template>
  <a-modal :maskClosable="false" :title="title" :width="800" v-model="visible" centered :confirmLoading="confirmLoading"
    @ok="handleSubmit">
    <div :id="mapId" style="width:100%;height:400px;"></div>
    <div class="info">
      <a-select show-search placeholder="请输入地址" style="width: 250px" :default-active-first-option="false"
        :show-arrow="false" :filter-option="false" :not-found-content="null" @search="autoInput" @change="handleChange">
        <a-select-option v-for="(d, index) in data" :value="index" :key="index">
          {{ d.name }}
        </a-select-option>
      </a-select>
    </div>
  </a-modal>
</template>
<script>
import AMap from 'AMap'
export default {
  data() {
    return {
      visible: false,
      mapId: 'container',
      confirmLoading: false,
      title: '设置经纬度',
      map: '',
      infoWindow: '',
      geocoder: '',
      lng: '',
      lat: '',
      address: '',
      data: [],
      fetching: false,
    }
  },
  props: {
    infoData: {
      type: Object,
      default: null
    }
  },
  mounted() {
  },
  methods: {
    show(key) {
      this.visible = true
      console.log('this.infoData', this.infoData)
      if (this.infoData.longitude) {
        this.lng = this.infoData.longitude
        this.lat = this.infoData.latitude
      }
      this.$nextTick(() => {
        if (!this.mapId || !this.map) {
          this.mapId = key ? `container${key}` : 'container'
          this.mapInit()
        }
      })
    },
    mapInit() {
      console.log('地图初始化：', this.mapId)
      this.map = new AMap.Map('container', {
        resizeEnable: true // 是否监控地图容器尺寸变化
      })
      this.geocoder = new AMap.Geocoder({
        radius: 1000 // 范围，默认：500
      })
      this.map.on('complete', () => {
        this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -35) })
        if (this.infoData.longitude) {
          this.createMarker()
        }
        this.clickOn()
      })
    },
    clickOn() {
      this.map.on('click', this.showInfoClick)
    },
    showInfoClick(e) {
      console.log('e--->', e)
      this.lng = e.lnglat.getLng()
      this.lat = e.lnglat.getLat()
      this.createMarker()
    },

    // 展示信息
    markerClick(e) {
      this.infoWindow.setContent(e.target.content)
      this.infoWindow.open(this.map, e.target.getPosition())
    },

    // 添加图例
    createMarker() {
      var _this = this
      this.map.clearMap()
      var marker = new AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [this.lng, this.lat]
      })
      this.map.add(marker)
      this.map.setFitView()
      var lnglat = [this.lng, this.lat]

      console.log('lnglat--->', lnglat)

      marker.setPosition(lnglat)

      this.geocoder.getAddress(lnglat, function (status, result) {
        if (status === 'complete' && result.regeocode) {
          _this.province = result.regeocode.addressComponent.province
          _this.city = result.regeocode.addressComponent.city
          var address = result.regeocode.formattedAddress
          _this.address = address
          marker.content = address
          marker.emit('click', { target: marker })
        } else {
          _this.$message.error('根据经纬度查询地址失败')
        }
      })
      marker.on('click', this.markerClick)
    },
    handleSubmit() {
      console.log(this.infoData)
      var params = {
        longitude: this.lng,
        latitude: this.lat,
        address: this.address
      }
      this.$emit('ok', params)
      this.visible = false
    },

    // 获取输入提示信息
    autoInput(val) {
      var _this = this
      AMap.plugin('AMap.Autocomplete', function () {
        // 实例化Autocomplete
        var autoOptions = {
          city: '全国'
        }
        var autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(val, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log('result.tips', result.tips)
          _this.data = result.tips
        })
      })
    },
    handleChange(index) {
      let item = this.data[index]
      if (!item.location) return
      this.lng = item.location.lng
      this.lat = item.location.lat
      this.createMarker()
    }
  }
}
</script>
<style scoped>
.info {
  position: absolute;
  top: 95px;
  left: 40px;
}
</style>
